<template>
  <div>
    <h3>slot 插槽</h3>
    <hr>
    <Category >
      <div slot="hea"> 具名插槽 -- header </div>
      <!-- 作用域插槽必须使用 template 标签包裹  scope属性指定数据接收-->
      <!-- <template slot="cen" scope="data"> -->
      <template slot="cen" slot-scope="data">
        <ul>
          <li v-for="(game,index) in data.games" :key="index">{{game}}</li>
        </ul> 
      </template>
      <template v-slot:foot>
        <span>1</span><span>2</span><span>3</span>
      </template>
    </Category>
  </div>
</template>
<script>
import Category from "./components/Category.vue";

export default {
  name:"App",
  data() {
    return {
      arr:{
        game:['1','2','3'],
        video:['a','b','c']
      }
    }
  },
  methods: {
    
  },
  components:{
    Category
  }
}
</script>